<template>
  <el-aside width="400px" class="right-box">
    <div class="cap-wrapper">组件属性</div>
    <el-scrollbar class="aside-scrollbar">
      <el-form size="small" label-width="80px" labelPosition="left">
        <template v-if="activeData">
          <el-form-item v-if="activeData.title !== undefined" label="标题">
            <el-input v-model="activeData.title" placeholder="请输入标题" />
          </el-form-item>
          <template v-if="activeData.keyName === 'todoList'">
            <el-form-item label="类型">
              <el-select
                v-model="activeData.modelType"
                placeholder="请选择"
                @change="modelTypeFn"
                style="min-width: 100px; font-size: 12px; width: 100%"
              >
                <el-option label="卡片" value="card"></el-option>
                <el-option label="标签页" value="tabs"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="activeData.modelType == 'tabs'">
              <template v-for="(it1, i) in activeData.tabsList">
                <el-input
                  :key="i"
                  placeholder="请输入内容"
                  v-model="it1.port"
                  class="input-with-select"
                  size="mini"
                >
                  <el-select
                    v-model="it1.selectValue"
                    slot="prepend"
                    placeholder="请选择"
                    @change="changeTabsList(i)"
                    style="min-width: 100px; font-size: 12px"
                  >
                    <el-option label="公告通知" value="notice"></el-option>
                    <el-option label="未读消息" value="unread"></el-option>
                    <el-option label="待办事项" value="todo"></el-option>
                    <el-option label="商机提醒" value="bisness"></el-option>
                  </el-select>
                </el-input>
                <!-- <i class="el-icon-remove-outline" /> -->
                <div
                  :key="it1.selectValue + i"
                  @click="delTodoTabs(it1.selectValue)"
                  class="close-btn select-line-icon select-line-icon_1"
                >
                  <i class="el-icon-remove-outline" />
                </div>
              </template>
              <div class="mt-10">
                <el-button @click="addTodoTabs" icon="el-icon-plus">
                  添加选项
                </el-button>
              </div>
            </template>
          </template>

          <template v-if="activeData.keyName === 'BisnessTodolist'">
            <div class="dataBoard-item">
              <!-- <el-form-item label="接口信息">
                <el-input
                  v-model="activeData.bisList[0].port"
                  placeholder="请输入接口"
                />
              </el-form-item> -->
              <el-form-item label="数据类型">
                <el-radio-group v-model="activeData.dataType">
                  <el-radio-button label="static">静态数据</el-radio-button>
                  <el-radio-button label="dynamic">远端数据</el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="远端数据"
                v-if="activeData.dataType === 'dynamic'"
              >
                <JsbosTreeSelect
                  :options="dataInterfaceOptions"
                  v-model="activeData.propsApi"
                  placeholder="请选择数据接口"
                  lastLevel
                  lastLevelKey="categoryId"
                  lastLevelValue="1"
                  clearable
                />
              </el-form-item>
              <div
                style="margin-top: 15px"
                v-if="activeData.dataType === 'static'"
              >
                <el-input
                  placeholder="请输入内容"
                  v-model="activeData.bisList[0].port"
                  class="input-with-select"
                  size="mini"
                >
                  <el-select
                    v-model="activeData.selectValue"
                    slot="prepend"
                    placeholder="请选择"
                    style="min-width: 100px; font-size: 12px"
                  >
                    <el-option label="公告通知" value="notice"></el-option>
                    <el-option label="未读消息" value="unread"></el-option>
                    <el-option label="待办事项" value="todo"></el-option>
                    <el-option label="商机提醒" value="bisness"></el-option>
                  </el-select>
                </el-input>
              </div>
              <!-- <el-form-item label="静态数据" v-else>
                <el-input
                  v-model="activeData.bisList[0].port"
                  placeholder="请输入接口"
                />


              </el-form-item> -->
            </div>
          </template>
          <!-- <template v-if="activeData.keyName === 'commonFunc'">
            <el-divider>选项</el-divider>
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="select-item"
            >
              <JsbosTreeSelect
                :options="menuList"
                v-model="item.id"
                placeholder="请选择菜单"
                lastLevel
                clearable
                @change="getSelectValue(arguments, index)"
              >
              </JsbosTreeSelect>
              <div
                class="close-btn select-line-icon"
                @click="delSelectItem(index)"
              >
                <i class="el-icon-remove-outline" />
              </div>
            </div>
            <div class="mt-10">
              <el-button
                icon="el-icon-plus"
                @click="addSelectItem"
                v-if="activeData.list.length < 10"
                >添加选项</el-button
              >
            </div>
          </template> -->
          <template v-if="activeData.keyName === 'CommonMenu'">
            <!-- <el-divider>选项</el-divider>
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="select-item"
            >
              <JsbosTreeSelect
                :options="menuList"
                v-model="item.id"
                placeholder="请选择菜单"
                lastLevel
                :disabled="true"
                @change="getSelectValue(arguments, index)"
              >
              </JsbosTreeSelect>
            </div> -->
            <!-- <div class="mt-10">
              <el-button
                icon="el-icon-plus"
                @click="addSelectItem"
                v-if="activeData.list.length < 10"
                >添加选项</el-button
              >
            </div> -->
          </template>
          <!-- 新增常用应用 -->
          <template v-if="activeData.keyName === 'CommonApp'">
            <!-- <el-divider>选项</el-divider> -->
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="select-item2"
            >
              <h4>
                {{ item.name }}
                <i
                  class="el-icon-delete delete-icon"
                  @click="deleteCommonApp(index)"
                ></i>
              </h4>
              <el-form-item label="标题" style="width: 100%">
                <el-input v-model="item.name" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="图标" style="width: 100%">
                <el-input v-model="item.img" placeholder="请输入图标地址" />
              </el-form-item>
              <el-form-item label="链接" style="width: 100%">
                <el-input
                  v-model="item.urlAddress"
                  placeholder="请输入跳转链接"
                />
              </el-form-item>
              <el-form-item label="详情" style="width: 100%">
                <el-input v-model="item.details" placeholder="请输入跳转详情" />
              </el-form-item>
            </div>
            <div class="mt-10">
              <el-button @click="addCommonApp" icon="el-icon-plus">
                添加选项
              </el-button>
            </div>
            <!-- <div class="mt-10">
              <el-button icon="el-icon-plus" @click="addSelectItem" v-if="activeData.list.length < 10">添加选项</el-button>
            </div> -->
          </template>

          <!-- 新增常用应用 -->
          <template v-if="activeData.keyName === 'dataBoard'">
            <div
              v-for="(item, index) in activeData.list"
              :key="index"
              class="dataBoard-item"
            >
              <p class="head">
                <span>选项{{ index + 1 }}</span>
                <a
                  class="head-icon el-icon-close"
                  @click="delDataBoardItem(index)"
                ></a>
              </p>
              <el-form-item label="标题">
                <el-input v-model="item.fullName" placeholder="请输入标题" />
              </el-form-item>

              <el-form-item label="数据类型">
                <el-radio-group v-model="item.dataType">
                  <el-radio-button label="static">静态数据</el-radio-button>
                  <el-radio-button label="dynamic">远端数据</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="数据接口" v-if="item.dataType === 'dynamic'">
                <JsbosTreeSelect
                  :options="dataInterfaceOptions"
                  v-model="item.propsApi"
                  placeholder="请选择数据接口"
                  lastLevel
                  lastLevelKey="categoryId"
                  lastLevelValue="1"
                  clearable
                />
              </el-form-item>
              <el-form-item label="数值" v-if="item.dataType === 'static'">
                <el-input v-model="item.num" placeholder="请输入数值" />
              </el-form-item>
              <el-form-item label="图标">
                <el-input v-model="item.icon" placeholder="请输入图标名称">
                  <el-button slot="append" @click="openIconsDialog(index)">
                    选择</el-button
                  >
                </el-input>
              </el-form-item>
              <el-divider></el-divider>
            </div>
            <el-button
              icon="el-icon-plus"
              @click="addDataBoardItem"
              v-if="activeData.list.length < 6"
              >添加选项</el-button
            >
          </template>
          <template
            v-if="
              activeData.keyName && activeData.keyName.indexOf('Chart') > -1
            "
          >
            <el-form-item label="数据类型">
              <el-radio-group
                v-model="activeData.dataType"
                size="small"
                @change="dataTypeChange"
              >
                <el-radio-button label="static">静态数据</el-radio-button>
                <el-radio-button label="dynamic">远端数据</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="数据设置"
              v-if="activeData.dataType === 'static'"
            >
              <el-button @click="showData(activeData.option)">查看</el-button>
            </el-form-item>
            <el-form-item
              label="数据接口"
              v-if="activeData.dataType === 'dynamic'"
            >
              <JsbosTreeSelect
                :options="dataInterfaceOptions"
                v-model="activeData.propsApi"
                placeholder="请选择数据接口"
                lastLevel
                lastLevelKey="categoryId"
                lastLevelValue="1"
                clearable
              />
            </el-form-item>
          </template>
        </template>
      </el-form>
    </el-scrollbar>
    <JSONArea v-if="areaVisible" ref="JSONArea" @refresh="updateOption" />
    <iconBox
      :visible.sync="iconsVisible"
      :current="current"
      @choiceIcon="setIcon"
    />
  </el-aside>
</template>
<script>
import draggable from "vuedraggable";
import { getSelectorAll } from "@/api/system/menu";
import { getDataInterfaceSelector } from "@/api/systemData/dataInterface";
import iconBox from "@/components/jsbos-iconBox";
import JSONArea from "./JSONArea";
export default {
  props: ["activeData"],
  components: { draggable, iconBox, JSONArea },
  data() {
    return {
      iconsVisible: false,
      areaVisible: false,
      currentIndex: 0,
      current: "",
      menuList: [],
      dataInterfaceOptions: [],
      // 下拉框选择接口
      select: "",
      modelType: "",
      tabsNumber: 2,
      tabsNumberList: [],
      tabsApi: {
        notice: "/api/visualdev/Dashboard/Notice",
        unread: "/api/visualdev/Dashboard/Email",
        todo: "/api/visualdev/Dashboard/FlowTodo",
        bisness: "/api/crm/CrmCustomerOpportunity/getList",
      },
    };
  },

  created() {
    this.getMenuList();
    this.getDataInterfaceSelector();
  },
  mounted() {},
  watch: {
    // // 默认数据 优化
    // activeData(newV, odlV) {
    //   if (newV.keyName == 'CommonApp') {
    //     if (newV.list.length == 0) {
    //       this.activeData.list = this.ceshiArr
    //     }
    //   }
    // }
  },
  methods: {
    addCommonApp() {
      this.activeData.list.push({
        details: "",
        img: "",
        name: "--",
        urlAddress: "",
      });
    },
    deleteCommonApp(index) {
      this.activeData.list.splice(index, 1);
    },
    addTodoTabs() {
      for (const key in this.tabsApi) {
        if (
          this.activeData.tabsList.findIndex(
            (item) => item.selectValue == key
          ) == -1
        ) {
          this.activeData.tabsList.push({
            selectValue: key,
            port: this.tabsApi[key],
          });
          return;
        }
      }
    },
    delTodoTabs(val) {
      console.log(val);
      this.activeData.tabsList.forEach((element, index) => {
        if (element.selectValue == val) {
          this.activeData.tabsList.splice(index, 1);
        }
      });
    },
    changeTabsList(i) {
      console.log(this.activeData.tabsList[i]);
      this.activeData.tabsList[i].port =
        this.tabsApi[this.activeData.tabsList[i].selectValue];
      console.log("this.activeData.tabsList[i]", i);
    },
    modelTypeFn() {
      this.$set(this.activeData, "tabsNumber", 2);
      let arr = [];
      for (let i = 0; i < Number(this.activeData.tabsNumber); i++) {
        // arr.push("tabs" + i);
        arr.push({
          selectValue:
            i == 0 ? "notice" : i == 1 ? "unread" : i == 2 ? "todo" : "bisness",
          port:
            i == 0
              ? this.tabsApi["notice"]
              : i == 1
              ? this.tabsApi["unread"]
              : i == 2
              ? this.tabsApi["todo"]
              : this.tabsApi["bisness"],
        });
      }
      this.$set(this.activeData, "tabsList", arr);
    },
    getMenuList() {
      getSelectorAll({ category: "Web" }).then((res) => {
        this.menuList = res.data.list;
      });
    },
    getDataInterfaceSelector() {
      getDataInterfaceSelector().then((res) => {
        this.dataInterfaceOptions = res.data;
      });
      console.log("this.activeData", this.activeData);
    },
    getSelectValue(data, i) {
      if (!data[0]) {
        this.$set(this.activeData.list, i, {
          fullName: "",
          id: "",
          urlAddress: "",
          icon: "",
          iconBackgroundColor: "",
          type: "",
          propertyJson: "",
          linkTarget: "_self",
          enCode: "",
          tabsNumber: "2",
          tabsList: [],
        });
      } else {
        let iconBackgroundColor = "";
        if (data[1].propertyJson) {
          let propertyJson = JSON.parse(data[1].propertyJson);
          iconBackgroundColor = propertyJson.iconBackgroundColor || "";
        }
        this.$set(this.activeData.list, i, {
          fullName: data[1].fullName,
          id: data[1].id,
          urlAddress: data[1].urlAddress,
          type: data[1].type,
          propertyJson: data[1].propertyJson,
          linkTarget: data[1].linkTarget,
          enCode: data[1].enCode,
          icon: data[1].icon,
          iconBackgroundColor: iconBackgroundColor,
        });
      }
    },
    addSelectItem() {
      this.activeData.list.push({
        fullName: "",
        id: "",
        urlAddress: "",
        icon: "",
        iconBackgroundColor: "",
        type: "",
        propertyJson: "",
        linkTarget: "_self",
        enCode: "",
        tabsNumber: "2",
        tabsList: [],
      });
    },
    delSelectItem(index) {
      if (this.activeData.list.length < 3) {
        this.$message({
          message: "选项最少要保留两项",
          type: "warning",
        });
        return;
      }
      this.activeData.list.splice(index, 1);
    },
    addDataBoardItem() {
      this.activeData.list.push({
        fullName: "",
        num: "",
        dataType: "static",
        propsApi: "",
        icon: "",
        tabsNumber: 2,
        tabsList: [],
      });
    },
    delDataBoardItem(index) {
      if (this.activeData.list.length < 3) {
        this.$message({
          message: "选项最少要保留两项",
          type: "warning",
        });
        return;
      }
      this.activeData.list.splice(index, 1);
    },
    openIconsDialog(index) {
      this.iconsVisible = true;
      this.currentIndex = index;
      this.current = this.activeData.list[this.currentIndex].icon;
    },
    setIcon(val) {
      this.activeData.list[this.currentIndex].icon = val;
    },
    showData(option) {
      this.areaVisible = true;
      this.$nextTick(() => {
        this.$refs.JSONArea.init(option);
      });
    },
    updateOption(data) {
      let option = data ? JSON.parse(data) : {};
      this.activeData.option = option;
    },
    dataTypeChange() {
      this.activeData.propsApi = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.right-box {
  background: #fff;
  border-radius: 4px;

  .cap-wrapper {
    text-align: center;
  }

  >>> .el-scrollbar__view {
    padding: 15px;
  }

  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    .el-select {
      flex: 1;
    }
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #606266;
  }

  .dataBoard-item {
    .el-form-item--small.el-form-item {
      margin-bottom: 10px;
    }

    .el-divider--horizontal {
      margin: 14px 0;
    }

    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .head-icon {
        color: #f56c6c;
      }
    }
  }
  .el-input-group {
    width: 90%;
  }
  .select-line-icon_1 {
    display: inline-block;
    position: relative;
    top: 3px;
    color: #f56c6c;
    .el-icon-remove-outline {
      cursor: pointer;
    }
  }
  .delete-icon {
    // margin-right: 15px;
    display: inline-block;
    margin-left: 15px;
  }
  .delete-icon:hover {
    color: #1890ff;
    cursor: pointer;
  }
}
</style>
